<template>
  <MyDialog
    :title="initParams.title"
    show-cancel
    :visible="showDialog"
    :ok-loading="btnLoading"
    width="700px"
    @close="close"
    @ok="handleConfirmClick"
  >
    <el-form
      ref="baseForm"
      v-loading="loading"
      :model="modalFormData"
      label-suffix=":"
      label-width="100px"
      :rules="modalRules"
    >
      <el-form-item label="商品名称" prop="name">
        <el-input v-model="modalFormData.name" placeholder="请输入商品名称" />
      </el-form-item>
      <!-- 下拉选择品牌 -->
      <el-form-item label="设备类型" prop="deviceType">
        <el-select
          v-model="modalFormData.deviceType"
          style="width: 100%"
          placeholder="请选择设备类型"
          clearable
        >
          <el-option
            v-for="item in deviceTypeList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <!-- 商品状态 -->
      <el-form-item label="商品状态" prop="statusValue">
        <el-select
          v-model="modalFormData.statusValue"
          style="width: 100%"
          placeholder="请选择商品状态"
          clearable
        >
          <el-option label="上线" :value="1"></el-option>
          <el-option label="下线" :value="0"></el-option>
        </el-select>
      </el-form-item>
      <!-- 商品描述 -->
      <el-form-item label="商品描述" prop="description">
        <el-input
          v-model="modalFormData.description"
          type="textarea"
          placeholder="请输入商品描述"
          :autosize="{ minRows: 2, maxRows: 6 }"
        />
      </el-form-item>

      <el-row>
        <el-col :span="11">
          <el-form-item label="商品价格" prop="price">
            <el-input-number
              v-model="modalFormData.price"
              :min="0"
              :max="100000"
              :step="10"
              controls-position="right"
              placeholder="请输入商品价格"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="11" :offset="2">
          <el-form-item label="优惠价格" prop="preferentialPrice">
            <el-input-number
              v-model="modalFormData.preferentialPrice"
              :min="0"
              :max="100000"
              :step="10"
              controls-position="right"
              placeholder="请输入优惠价格"
            >
            </el-input-number>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="商品底价" prop="basePrice">
        <el-input-number
          v-model="modalFormData.basePrice"
          :min="0"
          :max="100000"
          :step="10"
          controls-position="right"
          placeholder="请输入商品底价"
        >
        </el-input-number>
      </el-form-item>
      <el-form-item label="商品图片">
        <UploadFileImg :file-list="fileList" />
      </el-form-item>
    </el-form>
    <!-- 上传商品图片 -->
  </MyDialog>
</template>

<script>
import dialogMixin from "@/mixins/dialogMixin";
import { fetchDeviceBrandList } from "@/api/deviceManage";
import UploadFileImg from "@/components/uploadFileImg/index.vue";
import {DEVICE_TYPE} from "@/config/enum";

export default {
  components: {
    UploadFileImg,
  },
  mixins: [dialogMixin],
  props: {
    initParams: {
      type: Object,
      default: () => ({}),
    },
    btnLoading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      fileList: [],
      loading: false,
      deviceTypeList: DEVICE_TYPE,
      modalFormData: {
        name: "",
        deviceType: "",
        price: undefined,
        preferentialPrice: undefined,
        description: "",
        statusValue: 0,
        picture: "",
        basePrice: undefined,
      }, // 模态框表单数据
      modalRules: {
        name: [
          { required: true, message: "请输入商品名称", trigger: "blur" },
          {
            min: 1,
            max: 20,
            message: "长度在 1 到 20 个字符",
            trigger: "blur",
          },
        ],
        deviceType: [
          { required: true, message: "请选择设备类型", trigger: "blur" },
        ],
        price: [{ required: true, message: "请输入商品价格", trigger: "blur" }],
        preferentialPrice: [
          { required: true, message: "请输入优惠价格", trigger: "blur" },
        ],
        basePrice: [
          { required: true, message: "请输入商品底价", trigger: "blur" },
        ],
      }, // 模态框表单验证规则
    };
  },
  watch: {
    "initParams.row": {
      handler(row) {
        if (row) {
          this.modalFormData = {
            ...row,
          };
          const arr = row.picture && JSON.parse(row.picture);
          if (Array.isArray(arr)) {
            this.fileList = arr.map((item) => {
              return {
                ...item,
                url: item.absolutePath,
              };
            });
          }
        }
      },
      immediate: true,
    },
  },
  mounted() {
    this.getBrandList();
  },
  methods: {
    //获取设备品牌列表
    async getBrandList() {
      const { data } = await fetchDeviceBrandList({
        pageSize: 1000,
      });
      this.brandList = data?.records.map((item) => {
        return {
          label: item.name,
          value: item.deviceBrandId,
        };
      });
    },
    handleConfirmClick() {
      this.$refs.baseForm.validate((valid) => {
        if (!valid) return;
        if (this.fileList.length) {
          this.modalFormData.picture = JSON.stringify(this.fileList);
        }
        this.initParams.cb(this.modalFormData);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.input-number {
  ::v-deep .el-form-item__label {
    width: 180px !important;
  }
}
.icon {
  margin: 6px 0 0 20px;
  font-size: 26px;
  color: #999;
  cursor: pointer;
}
</style>
